<template>
  <div>
    <el-button
      circle
      v-model="drawer"
      @click="drawer = true"
      type="primary"
      style="margin-left: 16px"
    >
      <!-- <i class="iconfont icon-zhinengzhushou"></i> -->

      <img src="../assets/智能助手.png" alt="" />
    </el-button>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :direction="direction"
      :with-header="false"
    >
      <!-- <span class="caio">
        <iframe
          src="http://127.0.0.1:5500"
          frameborder="0"
          style="width: 100%; height: 100%"
        ></iframe>
      </span> -->
      <span class="caio">
        <iframe
          src="http://localhost:8080/static/index.html"
          frameborder="0"
          style="width: 100%; height: 100%"
        ></iframe>
      </span>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      direction: "ltr",
    };
  },
  methods: {},
};
</script>

<style scoped>
.el-button img {
  width: 1rem;
  height: 1rem;
}
.el-button {
  position: relative;
  transform: scale(0.9);
  top: 0.8rem;

  /* line-height: 100%;
  z-index: 1;
  transition: 0.5s;
  background-color: #f285ba;
  border: 2px solid #d4237a;
  overflow: hidden; */
}
.caio {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* .el-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  height: 0;
  width: 100%;
  left: 0;
  top: 0;
  background-color: #3a0820;
  transition: ease-in-out 0.5s;
}

.el-button:hover::before {
  height: 100%;
} */
</style>
